<script setup lang="ts">
import { addJueSeApi } from '@/api/system'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { reactive } from 'vue'
import { ref } from 'vue'

const props = defineProps<{
  isShow: boolean
  title: string
  formInfo: any
}>()
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getList'): void
}>()

const ruleFormRef = ref<any>()
const form = ref<any>({})
if (props.title === '修改维度') {
  form.value = { ...props.formInfo }
}

// 表单校验
interface RuleForm {}
const rules = reactive<FormRules<RuleForm>>({
  dim_name: [{ required: true, message: '请输入维度名称', trigger: 'blur' }],
  dim_tab: [
    { required: true, message: '请输入维表名称', trigger: 'blur' },
    // 正则校验
    {
      // eslint-disable-next-line no-useless-escape
      pattern: /^(?=.*\.).{1,}$/,
      message: '维表名称输入错误（建议格式 xx.xxx）',
      trigger: 'blur'
    }
  ],
  tab_pk: [{ required: true, message: '请输入维表主键', trigger: 'blur' }],
  dim_order: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})

// 取消
const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('update:isShow', false)
}

const saveFormFn = async () => {
  const params = {
    sqlId:
      props.title === '修改维度'
        ? JSON.stringify(['dimMgr.updateDim'])
        : JSON.stringify(['dimMgr.addDim']),
    sqlParam:
      props.title === '修改维度'
        ? JSON.stringify([
            [
              {
                dim_name: form.value.dim_name,
                dim_tab: form.value.dim_tab,
                tab_pk: form.value.tab_pk,
                dim_order: form.value.dim_order,
                dim_id: form.value.dim_id
              }
            ]
          ])
        : JSON.stringify([
            [
              {
                dim_name: form.value.dim_name,
                dim_tab: form.value.dim_tab,
                tab_pk: form.value.tab_pk,
                dim_order: form.value.dim_order
              }
            ]
          ]),
    dbName: undefined
  }
  await addJueSeApi(params)
    .then((res: any) => {
      if (res === 'success') {
        emit('getList')
        emit('update:isShow', false)
        ElMessage({ message: '提交成功', type: 'success' })
      } else {
        ElMessage({ message: '提交失败', type: 'error' })
      }
    })
    .catch(() => {
      ElMessage({ message: '提交失败', type: 'error' })
    })
}

// 确定
const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      saveFormFn()
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
}
</script>
<template>
  <div>
    <el-dialog :model-value="true" :title="title" @close="Cancel(ruleFormRef)">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维度名称:" prop="dim_name">
              <el-input v-model="form.dim_name" style="width: 300px" placeholder="请输入维度名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维表名称:" prop="dim_tab">
              <el-input v-model="form.dim_tab" style="width: 300px" placeholder="请输入维表名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维表主键:" prop="tab_pk">
              <el-input v-model="form.tab_pk" style="width: 300px" placeholder="请输入维表主键" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序:" prop="dim_order">
              <el-input v-model="form.dim_order" style="width: 300px" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="Confirm(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped></style>
